<script setup>
//导入ref
import { ref } from 'vue'
//导入api
import {init1Api} from '@/api/main'
import { useSettingsStore } from '@/store/settings';
const settingsStore = useSettingsStore(); // 使用 Pinia store

const dictList = ref([]); // 定义一个响应式数组用于存储字典数据
const config = ref({})

//初始化方法
const init = () => {
 return  init1Api().then(res => {
    const dataList = res.data.data; // 获取返回的数据数组

    // 遍历处理每个数据项
    const processedList = dataList.dict.map(item => ({
      id:item.id,
      title: item.title,
      originContent: item.content,
      content: splitContent(item.content),
    }));

    dictList.value = processedList; // 更新字典数据列表
    config.value = dataList.config
    console.log(dictList.value);

  })
}

// 分割 content 字段函数，处理英文逗号和中文逗号
const splitContent = (content) => {
  // 匹配英文逗号和中文逗号进行分割
  const contentArray = content.split(/[,\s，\s]+/);
  return contentArray;
};

// init()

const isKs = ref(true);
const isDJS = ref(true);
const footer = ref(false);
const word = ref('');

const startPlayback = () => {
  init().then(()=>{
    footer.value=true
    isKs.value = false
    isDJS.value = true

    let words = dictList.value[0].content;
    for(let i=2;i<=config.value.times;i++){
      words = words.concat(words)
    }
    const totalWords = words.length;
    const totalDuration = totalWords * config.value.per_second * 1000;

    words.forEach((word1, index) => {
      setTimeout(() => {
        word.value = word1;
        console.log(word.value);
      }, index * config.value.per_second * 1000);
    });

    setTimeout(() => {
      isDJS.value = false;
      isKs.value = true;
    }, totalDuration);
  })

};



</script>

<template>
  <div class="box" :class="`mod-${config.mod}`" >
    <div class="begin">
      <div class="desc" v-if="isKs">
        请您将后面十个词语大声朗读出来。最后我会请您回忆这十个词语。准备好了么？
      </div>
      <el-button type="primary" size="large" @click="startPlayback" v-if="isKs" >开始</el-button>
    </div>
   <div v-if="footer" :style="{'font-size':config.font_size + 'px'}">
     <div class="word" v-if="isDJS">{{word}}</div>
   </div>
  </div>
</template>

<style scoped lang="less">

.box{
  width: 100%;
  height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .word{
    //font-size: 450px;
    letter-spacing: 150px;
  }
  .begin{
    font-size: 30px;
    display: flex;
  }
}

.mod-1.box{
    background-color: #fff;
    color:#000;
}

.mod-2.box{
    background-color: #000;
    color:#fff;
}
</style>